<template>
  <page-header-wrapper :title="false">
    <a-row :gutter="20">
      <a-col :span="13">
        <a-card :loading="loading" title="编辑业务基本信息">
          <template slot="extra">
            <a-button size="small" type="primary" @click="saveEdit">保存更改</a-button>
          </template>
          <a-form-model
            ref="businessForm"
            :model="businessForm"
            :rules="businessRules"
          >
            <a-form-model-item label="业务类别">
              <a-select
                v-model="businessForm.category"
                placeholder="选择业务类别"
              >
                <a-select-option v-for="(item,index) in categoryOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="组别">
              <a-select
                v-model="businessForm.cat_group"
                placeholder="选择组别"
              >
                <a-select-option v-for="(item,index) in groupOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="业务名称">
              <a-input v-model="businessForm.name" type="text" />
            </a-form-model-item>
            <a-form-model-item label="业务描述">
              <a-textarea :rows="3" v-model="businessForm.name_desc" type="text" />
            </a-form-model-item>
            <a-form-model-item label="基础官费">
              <a-input v-model="businessForm.official_fee" type="text" />
            </a-form-model-item>
            <a-form-model-item label="大客户官费">
              <a-input v-model="businessForm.vip_official_fee" type="text" />
            </a-form-model-item>
            <a-form-model-item label="大客户建议报价下限">
              <a-input v-model="businessForm.vip_offer_section_lft" type="text" />
            </a-form-model-item>
            <a-form-model-item label="建议报价下限">
              <a-input v-model="businessForm.offer_section_lft" type="text" />
            </a-form-model-item>
            <a-form-model-item label="建议报价上限">
              <a-input v-model="businessForm.offer_section_rgt" type="text" />
            </a-form-model-item>
            <a-form-model-item label="申请周期">
              <a-input v-model="businessForm.register_period" type="text" />
            </a-form-model-item>
            <a-form-model-item label="回执时间">
              <a-input v-model="businessForm.receipt_time" type="text" />
            </a-form-model-item>
            <a-form-model-item label="有效期">
              <a-input v-model="businessForm.period_of_validity" type="text" />
            </a-form-model-item>
            <a-form-model-item label="初稿时间">
              <a-input type="text" v-model="businessForm.first_draft_time" />
            </a-form-model-item>
            <a-form-model-item label="改稿时间">
              <a-input type="text" v-model="businessForm.revision_time" />
            </a-form-model-item>
            <a-form-model-item label="ISO人数">
              <a-select
                v-model="businessForm.enterprise_persons"
                placeholder="选择业务类别"
              >
                <a-select-option v-for="(item,index) in personOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="ISO类型">
              <a-select
                v-model="businessForm.auth_type"
                placeholder="选择业务类别"
              >
                <a-select-option v-for="(item,index) in authOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="ISO风险">
              <a-select
                v-model="businessForm.risk"
                placeholder="选择业务类别"
              >
                <a-select-option v-for="(item,index) in riskOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="业务折算LOGO数">
              <a-input type="text" v-model="businessForm.converted_logos_num" />
            </a-form-model-item>
            <a-form-model-item label="专利流程折算数量">
              <a-input type="text" v-model="businessForm.converted_flow_num" />
            </a-form-model-item>
            <a-form-model-item label="专利师折算数量">
              <a-input type="text" v-model="businessForm.converted_engineer_num" />
            </a-form-model-item>
            <a-form-model-item label="业务材料备注说明">
              <quill-editor :value="businessForm.note" @change="onChange"></quill-editor>
            </a-form-model-item>
            <a-form-model-item label="是否隐藏">
              <a-radio-group v-model="businessForm.hide">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否需要办理执照业务">
              <a-radio-group v-model="businessForm.is_license">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否不经过专利师">
              <a-radio-group v-model="businessForm.pass_patentee">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否必填增项">
              <a-radio-group v-model="businessForm.is_ext">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="排序">
              <a-input type="text" v-model="businessForm.sort" placeholder="请输入排序" />
            </a-form-model-item>
            <a-form-model-item label="可领取此业务的角色">
              <a-select
                :default-value="defaultRole"
                v-model="defaultRole"
                mode="multiple"
                placeholder="选择可领取此业务的角色"
              >
                <a-select-option v-for="(item,index) in roleOpts" :key="index" :value="index">{{index}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </a-col>
      <a-col :span="11">
        <a-card :loading="loading" title="编辑业务所含材料">
          <template slot="extra">
            <a-button size="small" type="primary" icon="plus" @click="onMat('')">添加所需材料</a-button>
          </template>
          <s-table
            bordered
            ref="matTable"
            size="middle"
            :row-key="(record) => record.mat_id"
            :columns="matColumns"
            :data="matData"
          >
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="link" icon="edit" @click="onMat(record.mat_id)">编辑</a-button>
              <a-button size="small" type="link" icon="delete" @click="delMat(record.mat_id)">删除</a-button>
            </template>
          </s-table>
        </a-card>
        <a-card style="margin-top:20px" title="增项管理">
          <template slot="extra">
            <a-button size="small" type="primary" icon="plus" @click="onAdd('')">添加增项</a-button>
          </template>
          <s-table
            bordered
            ref="addTable"
            size="middle"
            :row-key="(record) => record.ext_id"
            :columns="addColumns"
            :data="addData"
          >
            <template slot="type" slot-scope="text">
              <a-tag color="red">{{typeOpts[text]}}</a-tag>
            </template>
            <template slot="name" slot-scope="text">
              <a-tag color="red">{{text}}</a-tag>
            </template>
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="link" icon="edit" @click="onEdit(record.ext_id)">编辑</a-button>
              <a-button size="small" type="link" icon="delete" @click="delExt(record.ext_id)">删除</a-button>
            </template>
          </s-table>
        </a-card>
        <a-card style="margin-top:20px" :loading="loading" title="编辑业务官方状态">
          <a-transfer
            show-search
            :list-style="{
              width: '250px',
              height: '300px',
            }"
            :filter-option="filterOption"
            :data-source="stateData"
            :titles="['状态库', '已选状态']"
            :selected-keys="selectedKeys"
            :target-keys="targetKeys"
            :render="item => item.title"
            @change="handleChange"
            @selectChange="handleSelectChange"
          />
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      title="添加/编辑所需材料"
      v-model="matVisible"
      @ok="onSubmitEdit"
    >
      <a-form-model
        ref="matForm"
        :model="matForm"
        :rules="matRules"
      >
        <a-form-model-item label="是否为公共材料" prop="is_public">
          <a-radio-group v-model="matForm.is_public">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item v-if="matForm.is_public == 1" label="公共材料标识" prop="public_mark">
          <a-input type="text" v-model="matForm.public_mark" placeholder="输入公共材料标识" />
        </a-form-model-item>
        <a-form-model-item label="材料名称" prop="mat_name">
          <a-input v-model="matForm.mat_name" type="text" />
        </a-form-model-item>
        <a-form-model-item label="关联系统预定字段">
          <a-select
            v-model="matForm.relate_field"
            placeholder="选择业务类别"
          >
            <a-select-option v-for="(item,index) in reserveFieldsOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="材料说明">
          <a-textarea v-model="matForm.desc" :rows="3" />
        </a-form-model-item>
        <a-form-model-item label="材料类型" prop="type">
          <a-select
            v-model="matForm.type"
            placeholder="选择业务类别"
          >
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选项">
          <a-textarea v-model="matForm.items" :rows="4" />
        </a-form-model-item>
        <a-form-model-item label="是否必填">
          <a-radio-group v-model="matForm.required">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="是否隐藏">
          <a-radio-group v-model="matForm.hide">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="排序">
          <a-input v-model="matForm.sort" type="text" />
        </a-form-model-item>
        <a-form-model-item label="示例类型">
          <a-select
            v-model="matForm.example_type"
            placeholder="选择业务类别"
          >
            <a-select-option v-for="(item,index) in exampleTypeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="示例名称">
          <a-input v-model="matForm.example_content" type="text" />
        </a-form-model-item>
        <a-form-model-item label="本条材料需要屏蔽的角色">
          <a-select
            mode="multiple"
            placeholder="本条材料需要屏蔽的角色"
            v-model="matForm.roles"
          >
            <a-select-option v-for="(item,index) in roleOpts" :key="index" :value="index">{{index}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="添加/编辑官方状态"
      v-model="stateVisible"
      @ok="onSubmitState"
    >
      <a-form-model
        ref="stateForm"
        :model="stateForm"
        :rules="stateRules"
      >
        <a-form-model-item label="编辑官方状态">
          <a-textarea v-model="stateForm.official_states" :rows="4"></a-textarea>
        </a-form-model-item>
<!--        <a-form-model-item label="状态名称">-->
<!--          <a-input v-model="stateForm.name" type="text" />-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="本状态是否触发倒计时">-->
<!--          <a-radio-group v-model="stateForm.is_djs">-->
<!--            <a-radio :value="1">是</a-radio>-->
<!--            <a-radio :value="0">否</a-radio>-->
<!--          </a-radio-group>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="倒计时天数">-->
<!--          <a-input :disabled="stateForm.is_djs != 1" v-model="stateForm.num" type="text" />-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="状态涉及的角色">-->
<!--          <a-select-->
<!--            mode="multiple"-->
<!--            placeholder="本条材料需要屏蔽的角色"-->
<!--          >-->
<!--            <a-select-option v-for="(item,index) in roleOpts" :key="index" :value="index">{{index}}</a-select-option>-->
<!--          </a-select>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="排序">-->
<!--          <a-input v-model="stateForm.sort" type="text" />-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="是否隐藏">-->
<!--          <a-radio-group v-model="stateForm.is_hide">-->
<!--            <a-radio :value="1">是</a-radio>-->
<!--            <a-radio :value="0">否</a-radio>-->
<!--          </a-radio-group>-->
<!--        </a-form-model-item>-->
      </a-form-model>
    </a-modal>
    <a-modal
      title="添加/编辑增项"
      v-model="addVisible"
      @ok="onSubmitExt"
    >
      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
      >
        <a-form-model-item label="增项类型" prop="type">
          <a-select v-model="addForm.type" placeholder="请选择增项类型">
            <a-select-option v-for="(item,index) in countOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="增项名称" prop="name">
          <a-input type="text" v-model="addForm.name" placeholder="输入增项名称" />
        </a-form-model-item>
        <a-form-model-item label="增项简称" prop="name_abbr">
          <a-input type="text" v-model="addForm.name_abbr" placeholder="输入增项简称" />
        </a-form-model-item>
        <a-form-model-item label="价格单位" prop="price">
          <a-input type="text" v-model="addForm.price" placeholder="输入价格单位" />
        </a-form-model-item>
        <a-form-model-item label="增项备注" prop="notes">
          <a-textarea :rows="4" v-model="addForm.notes" placeholder="输入增项备注" />
        </a-form-model-item>
        <a-form-model-item label="是否发送短信" prop="is_sms">
          <a-radio-group v-model="addForm.is_sms">
            <a-radio :value="0">否</a-radio>
            <a-radio :value="1">是</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import QuillEditor from '@/components/Editor/QuillEditor'
import { STable } from '@/components'
import {
  delExt,
  delMat,
  delState,
  getAddExt,
  getEditBusiness,
  getEditMat,
  getAddState,
  getExtList,
  getMatList,
  postEditBusiness,
  postEditMat,
  postEditState,
  postAddState,
  getEditExt,
  postAddExt,
  postEditExt
} from '@/api/business'
import businessColumns from '@/columns/business'

export default {
  components: {
    STable,
    QuillEditor
  },
  name: 'EditBusiness',
  data () {
    return {
      stateData: [],
      loading: false,
      categoryOpts: {},
      groupOpts: {},
      businessForm: {},
      businessRules: {},
      roleOpts: {},
      defaultRole: [],
      matVisible: false,
      matForm: {},
      matRules: {
        is_public: [{ required: true, message: '必须选择此材料是否为公共', trigger: 'change' }],
        public_mark: [{ pattern: /^[A-Za-z]+$/, message: '公共材料标识必须为纯英文', trigger: 'blur' }],
        mat_name: [{ required: true, message: '比如输入材料名称', trigger: 'blur' }],
        type: [{ required: true, message: '必须选择材料类型', trigger: 'change' }],
        items: [{ required: true, message: '必须填写可选项', trigger: 'blur' }]
      },
      matColumns: businessColumns.mat_columns,
      matData: parameters => {
        return getMatList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      stateForm: {},
      stateRules: {},
      stateVisible: false,
      stateColumns: businessColumns.state_columns,
      queryParam: {},
      typeOpts: {},
      exampleTypeOpts: {},
      reserveFieldsOpts: {},
      authOpts: {},
      personOpts: {},
      riskOpts: {},
      addColumns: businessColumns.added,
      addData: parameters => {
        return getExtList(parameters, this.$route.params.id).then(res => {
          this.typeOpts = res.result.type_opts
          return res.result
        })
      },
      addVisible: false,
      addForm: {},
      addRules: {
        type: [{ required: true, message: '选择类型', trigger: 'change' }],
        name: [{ required: true, message: '填写名称', trigger: 'blur' }],
        name_abbr: [{ required: true, message: '填写简称', trigger: 'blur' }],
        price: [{ required: true, message: '填写价格', trigger: 'blur' }],
        notes: [{ required: true, message: '必须填写备注', trigger: 'blur' }],
        is_sms: [{ required: true, message: '必须选择是否发警告短信', trigger: 'change' }]
      },
      targetKeys: [],
      selectedKeys: [],
      countOpts: {}
    }
  },
  activated () {
    this.getEdit(this.$route.params.id)
    this.getAllState()
    this.queryParam['filter[business_id]'] = this.$route.params.id
    this.$refs.addTable.refresh(true)
  },
  methods: {
    getEdit (id) {
      const app = this
      app.loading = true
      getEditBusiness(id).then(res => {
        const info = res.result
        if (res.status === 0) {
          app.businessForm = info.data
          app.roleOpts = info.role_opts
          app.defaultRole = info.role
          app.categoryOpts = info.categoryOpts
          app.authOpts = info.authOpts
          app.personOpts = info.enterprisePersonsOpts
          app.riskOpts = info.riOpts
          app.groupOpts = info.category20Opts
          app.loading = false
        } else {
          app.$warning({
            title: res.msg
          })
          app.loading = false
        }
      })
    },
    getAllState () {
      getAddState(this.$route.params.id).then(res => {
        this.stateData = res.result.all_opts
        this.targetKeys = res.result.selected_keys
      })
    },
    onChange (html) {
      this.businessForm.note = html
    },
    onMat (id) {
      const app = this
      const data = {}
      data['business_id'] = app.$route.params.id
      data['mat_id'] = id
      getEditMat(data).then(res => {
        app.matForm = res.result.data
        app.typeOpts = res.result.typeOpts
        app.exampleTypeOpts = res.result.exampleTypeOpts
        app.reserveFieldsOpts = res.result.reserveFieldsOpts
        app.matForm['business_id'] = data['business_id']
        app.matForm['mat_id'] = data['mat_id']
        this.matVisible = true
      })
    },
    onSubmitEdit () {
      const app = this
      const form = app.matForm
      const data = {}
      app.$refs.matForm.validate(valid => {
        if (valid) {
          for (const k in form) {
            data['mat[' + k + ']'] = form[k]
          }
          postEditMat(form['business_id'], form['mat_id'], data).then(res => {
            if (res.status === 0) {
              app.matVisible = false
              app.$refs.matTable.refresh(true)
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    },
    onState (id) {
      // const app = this
      // const data = {}
      // data['business_id'] = app.$route.params.id
      // data['state_id'] = id
      // getEditState(data).then(res => {
      //   app.stateForm = res.result.data
      //   app.stateForm['business_id'] = data['business_id']
      //   app.stateForm['state_id'] = data['state_id']
      //   this.stateVisible = true
      // })
    },
    onSubmitState () {
      const app = this
      const form = app.stateForm
      const data = {}
      for (const k in form) {
        data['state[' + k + ']'] = form[k]
      }
      postEditState(form['business_id'], form['state_id'], data).then(res => {
        if (res.status === 0) {
          app.stateVisible = false
          app.$refs.stateTable.refresh(true)
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    delMat (id) {
      const app = this
      app.$confirm({
        title: '是否删除业务材料',
        onOk: () => {
          delMat(id).then(res => {
            app.$refs.matTable.refresh(true)
          })
        }
      })
    },
    delState (id) {
      const app = this
      app.$confirm({
        title: '是否删除业务材料',
        onOk: () => {
          delState(id).then(res => {
            app.$refs.stateTable.refresh(true)
          })
        }
      })
    },
    saveEdit () {
      const app = this
      const id = this.$route.params.id
      const form = app.businessForm
      const roles = app.defaultRole
      const data = {}
      for (const k in form) {
        data['Business[' + k + ']'] = form[k]
      }
      for (const k in roles) {
        data['Business[roles][' + k + ']'] = roles[k]
      }
      postEditBusiness(id, data).then(res => {
        if (res.status === 0) {
          app.getEdit(id)
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onAdd () {
      this.addForm = {}
      getAddExt(this.$route.params.id).then(res => {
        if (res.status === 0) {
          this.countOpts = res.result.typeOpts
          this.addForm['business_id'] = this.$route.params.id
          this.addVisible = true
        }
      })
    },
    onSubmitExt () {
      const app = this
      const data = {}
      app.$refs.addForm.validate(valid => {
        if (valid) {
          for (const k in app.addForm) {
            data['ext[' + k + ']'] = app.addForm[k]
          }
          if (app.addForm['ext_id']) {
            postEditExt(app.addForm.business_id, app.addForm.ext_id, data).then(res => {
              if (res.status === 0) {
                app.addVisible = false
                app.$refs.addTable.refresh(true)
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            postAddExt(app.addForm.business_id, data).then(res => {
              if (res.status === 0) {
                app.addVisible = false
                app.$refs.addTable.refresh(true)
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        } else {
          return false
        }
      })
    },
    delExt (id) {
      const app = this
      app.$confirm({
        title: '是否确定删除',
        onOk: () => {
          delExt(id).then(res => {
            if (res.status === 0) {
              app.$refs.addTable.refresh(true)
            }
          })
        }
      })
    },
    onEdit (id) {
      const app = this
      app.addForm['ext_id'] = id
      getEditExt(app.$route.params.id, app.addForm['ext_id']).then(res => {
        if (res.status === 0) {
          app.addForm = res.result.data
          app.countOpts = res.result.typeOpts
          app.addVisible = true
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    handleChange (nextTargetKeys, direction, moveKeys) {
      const app = this
      const data = {}
      for (const k in nextTargetKeys) {
        data['states[' + nextTargetKeys[k] + ']'] = nextTargetKeys[k]
        // data['states[' + k + ']'] = nextTargetKeys[k]
      }
      postAddState(app.$route.params.id, data).then(res => {
        if (res.status === 0) {
          app.getAllState()
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    handleSelectChange (sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
    },
    filterOption (inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    }
  }
}
</script>

<style scoped>
  /deep/ .ant-form-item {
    margin-bottom: 10px
  }
</style>
